<template>
  <div id="details" ref="details" v-title data-title="掌上精选">
    <div class="leftBox" ref="leftBox">
      <section v-if="finishLeft">
        <div class="box1">
          <!-- <div class="titleBox">
            <img src="../../../../assets/wang/tdetails/dy.png" alt="" />
            <span>抖音号</span>
          </div>-->
          <div class="infoBox">
            <!-- 头像 -->
            <div class="infoTop">
              <div class="infoTopLeft">
                <!-- 是否正在直播中，后端目前没有返回这个字段暂时注释掉， -->
                <div
                  class="avatorBox"
                  :class="{ playing: infoData.liveStatu == 1 }"
                >
                  <el-popover
                    placement="right"
                    width="200"
                    popper-class="big_img"
                    :visible-arrow="false"
                    trigger="click">
                    <img
                      v-if="infoData.isDelete != 2 && infoData.isDelete != 3"
                      :src="infoData.logo"
                      class="avatorImg"
                      v-errorImg:talent
                      slot="reference" 
                    />
                    <img
                      v-if="infoData.isDelete == 2 || infoData.isDelete == 3"
                      src="@/assets/shi/detail.jpg"
                      class="avatorImg"
                      slot="reference" 
                    />
                    <img
                      v-if="infoData.isDelete != 2 && infoData.isDelete != 3"
                      :src="infoData.logo"
                      class="avatorImg"
                      v-errorImg:talent
                    />
                    <img
                      v-if="infoData.isDelete == 2 || infoData.isDelete == 3"
                      src="@/assets/shi/detail.jpg"
                      class="avatorImg"
                      alt
                    />
                  </el-popover>
                  <div class="playingIcon" v-if="infoData.liveStatu == 1">
                    <p class="livingGif">
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                    </p>
                  </div>
                </div>
              </div>
              <el-popover placement="bottom" trigger="hover">
                <vue-qr
                  :size="100"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :text="infoData.shareLink"
                />
                <p
                  style="
                    text-align: center;
                    font-size: 14px;
                    color: #888888;
                    margin-top: 10px;
                  "
                >查看抖音主页</p>

                <img src="../../../../assets/wang/tdetails/ewm.png" class="ewmImg" slot="reference" />
              </el-popover>
              <div class="ewmImg-box"></div>
              <div class="infoTopRight">
                <div class="nameBox">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="infoData.nickName"
                    placement="top"
                  >
                    <p>{{ infoData.nickName }}</p>
                  </el-tooltip>
                  <img
                    src="../../../../assets/wang/talentCompare/shop.png"
                    v-if="infoData.isShop == 1"
                  />
                  <img src="../../../../assets/shi/live.png" v-if="infoData.liveStatu == 1" />
                  <div v-if="infoData.isDelete == 2" class="delete">已封号</div>
                  <div v-if="infoData.isDelete == 3" class="delete">已注销</div>
                </div>
                <div class="noteBox">
                  <!-- 企业认证为蓝色2 个人认证为黄色1 -->
                  <img
                    src="../../../../assets/wang/talentCompare/rzBlue.png"
                    v-if="infoData.verifyType == 2"
                  />
                  <img
                    src="../../../../assets/wang/talentCompare/rzOrange.png"
                    v-if="infoData.verifyType == 1"
                  />
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="infoData.verifyName"
                    placement="top"
                  >
                    <p class="dot">{{ infoData.verifyName }}</p>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div
              class="bglive"
              v-if="infoData.liveStatu == 1"
              @click="toLiveDetails(infoData.liveStatu, infoData.roomid)"
            >实时大屏</div>
            <div class="info_warp">
              <!-- 带货口碑 -->
              <div
                class="info_warp-item"
                v-if="
                  infoData.praiseLevel &&
                    infoData.praiseLevel.length &&
                    infoData.praiseLevel[0].level != 0 &&
                    infoData.praiseLevel[0].publicPraise != 0
                "
              >
                <div class="info_item-left" style="line-height: 25px">带货口碑</div>
                <div class="info_item-right">
                  <el-rate
                    v-model="scareValue"
                    disabled
                    :colors="rateColor"
                    score-template="{value}"
                  ></el-rate>
                  <span
                    :style="{
                      color:
                        PraiseData.level == 1
                          ? '#ea4759'
                          : PraiseData.level == 2
                          ? '#fd7f2c'
                          : '#4f5058'
                    }"
                  >{{ scareValue }}</span>

                  <span v-if="PraiseData.level == 1" style="color: #ea4759;margin: 4px">高</span>
                  <span v-else-if="PraiseData.level == 2" style="color: #fd7f2c;margin: 4px">中</span>
                  <span v-else style="color: #4f5058;margin: 4px">低</span>
                  <img
                    class="num-img"
                    src="@/assets/shi/k-line.png"
                    @click="
                      boardClick(true);
                      showMouthEchart = true;
                      changeBoard = true;
                    "
                    alt
                  />
                </div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">抖音号</div>
                <div class="info_item-right">{{ infoData.uniqueId }}</div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">性别</div>
                <div class="info_item-right">
                  <img class="sex" v-if="infoData.gender == 2" src="@/assets/shi/girl.png" alt />
                  <img class="sex" v-else-if="infoData.gender == 1" src="@/assets/shi/boy.png" alt />
                  <span v-else>--</span>
                </div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">年龄</div>
                <div class="info_item-right">
                  <span v-if="infoData.age">{{ infoData.age }} 岁</span>
                  <span v-else>--</span>
                </div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">地区</div>
                <div class="info_item-right">
                  <span v-if="infoData.city">{{ infoData.city }}</span>
                  <span v-else>--</span>
                </div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">行业</div>
                <div class="info_item-right">
                  <span v-if="infoData.category">{{ infoData.category }}</span>
                  <span v-else>--</span>
                </div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">粉丝总数</div>
                <div class="info_item-right">
                  {{ format_num(infoData.totalFans) }}
                  <img
                    class="num-img"
                    src="@/assets/shi/k-line.png"
                    @click="
                      showFansEchart = true;
                      FansDays = '30天';
                    "
                    alt
                  />
                </div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">点赞总数</div>
                <div class="info_item-right">
                  {{ format_num(infoData.totalFavorite) }}
                  <img
                    class="num-img"
                    src="@/assets/shi/k-line.png"
                    @click="
                      showFabulousEchart = true;
                      FabulousDays = '30天';
                    "
                    alt
                  />
                </div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">赞粉比</div>
                <div class="info_item-right">{{ format_num(infoData.praisePowderThan) }} : 1</div>
              </div>
              <div class="info_warp-item">
                <div class="info_item-left">简介</div>
                <div class="info_item-right">
                  <div v-if="infoData.introduce.length < 30">
                    <span class="tj" v-if="infoData.introduce">{{ infoData.introduce }}</span>
                    <span v-else>--</span>
                  </div>
                  <div v-else>
                    <!-- <span class="tj" v-if="infoData.introduce"
                      >{{ showBtn ? sliceStr : infoData.introduce }}
                      <span class="show-btn" @click="showBtn = !showBtn">{{
                        showBtn ? "展开" : "收起"
                      }}</span>
                    </span>-->
                    <TextShowHidden lineHeight="19" line="2" :text="infoData.introduce" />
                  </div>
                </div>
              </div>
              <div
                class="info_category"
                v-if="infoData.categoryNames && infoData.categoryNames.length"
              >
                <div class="info_category-title">主推类目</div>
                <div class="info_category-label">
                  <div
                    class="label-item"
                    v-for="(item, index) in infoData.categoryNames"
                    :key="index"
                  >{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="btnBox">
            <div class="btnBox-item" v-if="infoData.isCollect == 0 && vipLevel!=0" @click="addStar(infoData)">添加收藏</div>
            <el-tooltip  effect="dark" placement="top-start" content="当前权限不足，请升级会员后使用">
              <div class="btnBox-item disable_btnbox" v-if="vipLevel==0&&infoData.isCollect == 0">添加收藏</div>
            </el-tooltip>
            <div
              class="btnBox-item"
              v-if="infoData.isCollect == 1"
              @click="cancelStar(infoData)"
            >已收藏</div>
            <div class="btnBox-item" @click="addCompare(infoData)">添加对比</div>
            <!-- <div class="btnBox-item">
              <div
                class="showPopup-box"
                @mouseover="showKeFu = true"
                @mouseleave="showKeFu = false"
              >
                联系方式
              </div>
            </div>-->
            <!-- <div class="erweima" v-show="showKeFu">
              <img src="@/assets/img/xiaozhushou_qr.jpg" alt="" />
              <div>联系客服获取达人联系方式</div>
            </div>-->
            <div class="btnBox-item" @mouseenter="showPopup = true" @mouseleave="showPopup = false">
              更多 >
              <div class="showPopup" v-if="showPopup">
                <div class="box">
                  <div class="showPopup-box active" @click="liveJc(infoData)">直播监测</div>
                  <div class="showPopup-box active" @click="accountJc(infoData)">账号监测</div>
                  <div
                    class="showPopup-box"
                    @mouseover="showKeFu = true"
                    @mouseleave="showKeFu = false"
                  >联系方式</div>
                </div>
                <!-- 二维码 -->
                <div class="erweima" v-show="showKeFu">
                  <img src="@/assets/img/xiaozhushou_qr.jpg" alt />
                  <div>联系客服获取达人联系方式</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box2" v-if="infoData.liveQuotes && infoData.liveQuotes.length">
          <div class="box2_item">
            <div class="box2_item-title">品牌推广专场</div>
            <div class="box2_item-cont">
              <div class="cont-left">
                <span class="red">￥{{ infoData.liveQuotes[0].brandHour }}</span>/小时
              </div>
              <div class="cont-right">
                <span class="red">￥{{ infoData.liveQuotes[0].brandDay }}</span>/天
              </div>
            </div>
          </div>
          <div class="box2_item">
            <div class="box2_item-title">电商带货专场</div>
            <div class="box2_item-cont">
              <div class="cont-left">
                <span class="red">￥{{ infoData.liveQuotes[0].electricitySpecial }}</span>/小时
              </div>
              <div class="cont-right">
                <span class="red">￥{{ infoData.liveQuotes[0].electricityJoin }}</span>/商品
              </div>
            </div>
          </div>
        </div>
        <div class="talentCompare" v-if="taentNewData.length != 0">
          <div class="top">
            <div>
              达人对比
              <p>{{ num }}/6</p>
            </div>
            <span @click="empty()">清空</span>
          </div>
          <div class="img_center">
            <div class="img_box"></div>
            <div class="img_box"></div>
            <div class="img_box"></div>
            <div class="img_box"></div>
            <div class="img_box"></div>
            <div class="img_box"></div>
          </div>
          <div class="img_center_box">
            <div
              class="img_box"
              v-for="(item, index) in taentNewData"
              :key="index"
              @mouseover="mouseOver(item, index)"
              @mouseleave="mouseleave()"
            >
              <img v-if="item.isDelete == 2 ||item.isDelete == 3" src="@/assets/shi/detail.jpg" alt />
              <div v-if="item.isDelete == 2" class="delete">已封号</div>
              <div v-if="item.isDelete== 3" class="delete">已注销</div>
              <img v-else :src="item.logo" alt v-errorImg:talent />

              <img
                src="../../../../assets/li/delete_talent.png"
                alt
                class="delete_talent"
                v-if="isShowImg == item.authorId"
                @click="deleteTalent(item.authorId)"
              />
            </div>
          </div>
          <div class="button_box">
            <button v-if="taentNewData.length < 2">确认对比</button>
            <button
              class="button_affirm"
              @click="comparison()"
              v-if="taentNewData.length >= 2 && !showButton"
            >确认对比</button>
            <div class="confirmBtn boxShow" v-if="showButton && taentNewData.length >= 2">
              <div
                v-loading="showLoading1"
                class="showLoading1"
                element-loading-spinner="el-icon-loading"
              ></div>
              <div
                class="boxShow_text"
                style="position:relative;
    left: 24px;text-align: left;
    "
              >对比中</div>
            </div>
          </div>
        </div>
      </section>
      <div
        v-loading="!finishLeft"
        v-if="!finishLeft"
        class="loading loading01"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <div class="rightBox" ref="rightBox">
      <div class="page_nav_tip" v-if="activeName == 0">该页面仅展示最近30天的数据，点击更多查看详情</div>
      <div class="top_mask"></div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="数据概览" name="0">
          <DataOverview v-if="activeName == '0'" @toFatherData="getData" />
        </el-tab-pane>
        <el-tab-pane label="关联直播" name="1">
          <LiveDetail v-if="activeName == '1'" />
        </el-tab-pane>
        <el-tab-pane label="电商分析" name="2">
          <CargoAnalysis v-if="activeName == '2'" />
        </el-tab-pane>
        <el-tab-pane label="关联视频" name="3">
          <VideoDetail v-if="activeName == '3'" />
        </el-tab-pane>
        <el-tab-pane label="粉丝分析" name="4">
          <FansAnalysis v-if="activeName == '4'" />
        </el-tab-pane>
      </el-tabs>
      <!-- =========  一键提速  =========  -->
      <div class="speedbox">
        <div class="iconbox" v-if="showBall" @click="getTimeDown()">
          <div class="speedicon">
            <img class="lightning" src="@/assets/li/lightning.png" alt />
          </div>
          <div class="onekeys">{{ keyss==1 ? "提速完成" :keyss==2 ?"提速失败":"一键提速" }}</div>
        </div>

        <div class="iconbox" @click="speedIngChang" v-if="speedIs">
          <div class="speedicon accelerate">
            <img class="lightning" src="@/assets/li/lightning_all.png" alt />
          </div>

          <img class="circle" src="@/assets/li/semicircle.png" alt />
          <div class="shadowBox_01" :class="{ transparency: isOpacity }"></div>
          <div class="shadowBox_02" :class="{ transparency: !isOpacity }"></div>
        </div>

        <div class="clicked" v-if="fivemin ">
          <div class="speedicons accelerate">
            <img src="@/assets/li/lightning_all.png" alt />
          </div>
          <img class="circle" src="@/assets/li/semicircle.png" alt />
          <div class="shadowBox_01" :class="{ transparency: isOpacity }"></div>
          <div class="shadowBox_02" :class="{ transparency: !isOpacity }"></div>
          <div class="clicktext">
            <img src="@/assets/shi/closeimg_03.gif" @click="closeimg()" />
            <div class="clicktime">
              <span>{{ minute }}</span> :
              <span>{{ secondS }}</span>
            </div>
            <p>正在为您提速中</p>
            <p>请于5分钟后查看数据</p>
          </div>
        </div>

        <div class="clicked" v-if="tenmin">
          <div class="speedicons borderNone">
            <img src="@/assets/li/lightning.png" alt />
          </div>
          <div class="clicktext">
            <img src="@/assets/shi/closeimg_03.gif" @click="closeimg2()" />
            <div class="clicktime">
              <span>{{ minute }}</span> :
              <span>{{ secondS }}</span>
            </div>
            <p>您已经点击过一次了</p>
            <p>请您稍后再试</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 口碑趋势 -->
    <el-dialog :visible.sync="showMouthEchart" width="740px" top="22.5vh" class="dialogLoginBox">
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">口碑趋势</div>
          <div class="switch">
            <!-- <div
              class="switch-btn"
              :class="{ native: changeBoard }"
              @click="changeBoard=true"
            >-->
            <div class="switch-btn" :class="{ native: changeBoard }" @click="boardClick(true)">日榜</div>
            <!-- <div
              class="switch-btn"
              :class="{ native: !changeBoard }"
              @click="changeBoard=false"
            >-->
            <div class="switch-btn" :class="{ native: !changeBoard }" @click="boardClick(false)">月榜</div>
          </div>
        </div>
        <div class="popup_wrap-explain">
          <el-rate v-model="scareValue" disabled :colors="rateColor" score-template="{value}"></el-rate>
          <span
            :style="{
              color:
                PraiseData.level == 1
                  ? '#ea4759'
                  : PraiseData.level == 2
                  ? '#fd7f2c'
                  : '#4f5058'
            }"
          >{{ scareValue }}</span>

          <span v-if="PraiseData.level == 1" style="color: #ea4759">高</span>
          <span v-else-if="PraiseData.level == 2" style="color: #fd7f2c">中</span>
          <span v-else style="color: #4f5058">低</span>
          <div class="text">
            带货口碑排名打败
            <span class="num">{{ PraiseData.percentage ? PraiseData.percentage : "--" }}%</span>同行
          </div>
        </div>
        <div class="popup_wrap-echart">
          <KChart :xData="xData" :series1="PraiseData.value" name1="口碑趋势" />
        </div>
      </div>
    </el-dialog>

    <!-- 粉丝趋势 -->
    <el-dialog :visible.sync="showFansEchart" width="740px" top="22.5vh" class="dialogLoginBox">
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">粉丝趋势</div>
          <div class="time_slot" id="STimeSlot">
            <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="FansDays" class="tab01" />
            <div class="optionsBox">
              <el-date-picker
                class="long_time"
                v-model="FansliveTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                prefix-icon="el-icon-arrow-down"
                unlink-panels
                :clearable="false"
                :picker-options="FansStartEnd"
                value-format="yyyy-MM-dd"
                @change="FansPicker"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <div class="popup_wrap-echart m-t30">
          <KChart
            v-if="FansEchart.xData.length"
            :xData="FansEchart.xData"
            :series1="FansEchart.yData1"
            :series2="FansEchart.yData2"
            name1="增量"
            name2="总量"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 点赞趋势 -->
    <el-dialog :visible.sync="showFabulousEchart" width="740px" top="22.5vh" class="dialogLoginBox">
      <div class="popup_wrap">
        <div class="popup_wrap-title">
          <div class="title">点赞趋势</div>
          <div class="time_slot" id="STimeSlot">
            <radio_group01
              :radio_values="['近7天', '30天', '90天']"
              v-model="FabulousDays"
              class="tab01"
            />
            <div class="optionsBox">
              <el-date-picker
                class="long_time"
                v-model="FabulousliveTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                prefix-icon="el-icon-arrow-down"
                unlink-panels
                :clearable="false"
                :picker-options="FabulousStartEnd"
                value-format="yyyy-MM-dd"
                @change="FabulousPicker"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <div class="popup_wrap-echart m-t30">
          <KChart
            v-if="FabulousEchart.xData.length"
            :xData="FabulousEchart.xData"
            :series1="FabulousEchart.yData1"
            :series2="FabulousEchart.yData2"
            name1="增量"
            name2="总量"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 账号检测弹窗 -->
    <div class="talentPopupList">
      <el-dialog :visible.sync="popupList" custom-class="buyDialog" v-if="numberMonitorData">
        <div class="accountDiolog">
          <p class="title">账号监测</p>

          <div
            class="loading"
            v-if="!table_data.length && roomLoading"
            v-loading="roomLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          ></div>
          <ul class="searchResult">
            <li class="borderColor">
              <div class="logo">
                <img :src="numberMonitorData.logo" />
              </div>
              <div class="info">
                <p class="name">{{ numberMonitorData.nickName }}</p>
                <p class="tiktok">抖音号：{{ numberMonitorData.uniqueId }}</p>
              </div>
              <div>
                <img src="@/assets/liu/Couplet.png" />
              </div>
            </li>
          </ul>
          <div v-if="!table_data.length && !roomLoading && showInclude">
            <div class="zw">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
          <p class="accFrequency">
            本次监测消耗
            <span v-if="consume">{{ consume }}</span>
            <span v-else>1</span>次直播监测次数，剩余
            <span v-if="surplus">{{ surplus }}</span>
            <span v-else>0</span>次直播监测次数。
          </p>
          <button class="startButton" @click="accountMonitorFn">开始监测</button>
        </div>
      </el-dialog>
    </div>
    <!-- =======================账号检测弹窗=============================== -->
    <!-- ====================直播检测弹窗==================================== -->
    <el-dialog
      :visible.sync="showHotRoom"
      v-if="liveMonitorData"
      class="dialog01"
      id="liveJc"
      custom-class="buyDialog"
      width="572px"
    >
      <div class="hotRoomBox">
        <p class="title">直播监测</p>
        <p class="txt">针对达人直播时的数据分析，提供实时弹幕、销量、在线人数、音浪收入、等数据监测。</p>
        <div
          v-if="!table_data01.length && roomLoading"
          style="margin-top: 30px; margin-bottom: 100px"
          v-loading="roomLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        ></div>

        <div
          v-if="showInclude && !roomLoading && !table_data01.length"
          style="position: relative; height:300px"
        >
          <div class="zw">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
        <ul class="Talent_list">
          <!-- <li
            :class="index == item.unique_id ? 'active_Talent' : ''"
            v-for="(item, i) in table_data01"
            :key="i + 'q'"
            @click="choiceTalent01(item.unique_id, item.author_id)"
          >
            <div>
              <img :src="item.logo" />
            </div>
            <div>
              <p>{{ item.nickname }}</p>
              <p>抖音号：{{ item.unique_id }}</p>
            </div>
            <div v-if="index == item.unique_id">
              <img src="@/assets/liu/Couplet.png" />
            </div>
          </li>-->
          <li class="active_Talent">
            <div>
              <img :src="liveMonitorData.logo" />
            </div>
            <div>
              <p>{{ liveMonitorData.nickName }}</p>
              <p>抖音号：{{ liveMonitorData.uniqueId }}</p>
            </div>
            <div>
              <img src="@/assets/liu/Couplet.png" />
            </div>
            <!-- liveMonitorData -->
          </li>
        </ul>
        <!-- <div class="duration">
          监控时长 <span v-if="choiceValue.length">共{{ choiceValue }}监测</span>
        </div>-->
        <div class="duration" v-if="choiceValue.length">
          监控时长
          <span>共{{ choiceValue }}监测</span>
        </div>
        <div class="duration" v-else>
          监控时长
          <span>共0小时监测</span>
        </div>
        <div class="choice">
          <button :class="choiceValue == '6小时' ? 'active' : ''" @click="choice('6小时')">6小时</button>
          <button :class="choiceValue == '12小时' ? 'active' : ''" @click="choice('12小时')">12小时</button>
          <button
            :class="choiceValue == '24小时' && Hour != 0 ? 'active' : ''"
            @click="choice('24小时')"
          >24小时</button>
          <button :class="choiceValue == '48小时' ? 'active' : ''" @click="choice('48小时')">48小时</button>
          <button :class="custom ? 'active' : ''" @click="choice('自定义')">自定义</button>
        </div>
        <div style="text-align: center">
          <el-date-picker
            v-model="value1"
            v-show="custom"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            @change="changeTime"
            value-format="timestamp"
            :picker-options="pickeroptions"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <p class="tips">开启直播监测后，则在监测时间段内，监测所有直播信息。若在监测时间段内没有直播，则直播监测也视为完成。</p>
        <div class="remind">
          <span>直播提醒</span>
          <el-switch v-model="switchValue" active-color="#fd7f2c" inactive-color="#fbfbfb"></el-switch>
        </div>
        <p v-if="switchValue" class="push">开播时我们会通过掌上数据公众号为您推送消息。</p>
        <p class="rule">扣款规则:每六小时扣一次监测次数，不满六小时按六小时计算。点击取消监测后，若监测已开始，则退还未使用的监测次数。若监测未开始，则退还全部次数。</p>
        <p v-if="frequency" class="frequency">
          本次监测消耗
          <span>{{ frequency.useNum }}</span>
          次直播监测次数，剩余
          <span>{{ frequency.surplus }}</span>次直播监测次数。
        </p>
        <div class="testing">
          <button @click="liveMonitorFn()">开始监测</button>
        </div>
      </div>
    </el-dialog>
    <!-- 对比详情 -->
    <div class="box">
      <el-dialog :visible.sync="talentDetails" :show-close="true" v-if="talentDetails">
        <div class="topicDetailsBox">
          <talentDetails :inputName="item_id" />
        </div>
      </el-dialog>
    </div>
    <!-- 收藏打到上限弹窗 -->
    <el-dialog
      :visible.sync="storeUpMask"
      id="liveJc"
      custom-class="store_up_wrap"
      width="460px"
    >
      <div class="store_up_mask">
        <div class="sum_top">
          <div class="line"></div>
          <div class="text">会员权限不足</div>
        </div>
        <div class="sum_con_wrap">
          <div class="text">您当前收藏人数已达上限,</div>
          <div class="text">您可以进行取消收藏部分达人或进行升级会员操作。</div>
        </div>
        
        <div class="sum_btn_wrap">
          <div class="sum_btn_item btn1" @click="toCollection">取消收藏</div>
          <div v-if="vipLevel!=1&&vipLevel!=2" class="sum_btn_item btn2" @click="toBuy">升级会员</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export { default } from "./NewTdetails";
</script>
<style lang="less" scoped>
@import "./tdetails.less";
#details #liveJc .hotRoomBox .Talent_list {
  height: inherit;
}
#details #liveJc .hotRoomBox .Talent_list > li {
  width: initial;
}
#details .talentPopupList .accountDiolog .searchResult {
  height: inherit;
}
/* 一键提速 */
.speedbox {
  position: relative;
  bottom: 154px;
  z-index: 9;
  .iconbox {
    position: absolute;
    bottom: 0;
    right: 16px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    .circle {
      position: absolute;

      top: -7px;
      right: 1px;
      width: 56px;
      height: 56px;
      -webkit-animation: rainbow-data-v-07745544 1s linear infinite normal;
      animation: rainbow-data-v-07745544 1s linear infinite normal;
      z-index: 111;
    }
    @keyframes rainbow {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .speedicon {
      position: absolute;
      bottom: 0%;
      right: 0%;
      z-index: 20;
      width: 100%;
      height: 100%;
      background-size: 23px 30px;
      border-radius: 50%;
      background-color: #ff7600;
      .lightning {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -14px;
        margin-top: -15px;
      }
    }
    .accelerate {
      border: 4px solid #ffe2cf;
    }
    .onekeys {
      position: absolute;
      right: 72%;
      bottom: 10%;
      z-index: 10;
      width: 0;
      height: 40px;
      line-height: 40px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: #ffe9da;
      font-size: 1px;
      color: #ff7600;
      text-align: center;
      // transition:all 0.3s ease-in;
      display: none;
    }
    .shadowBox_01 {
      width: 23px;
      height: 15px;
      background: url("../../../../assets/li/lightning_top.png");
      z-index: 22;
      position: absolute;
      left: 14%;
      top: 6px;
    }
    .shadowBox_02 {
      width: 23px;
      height: 15px;
      background: url("../../../../assets/li/lightning_bottom.png");
      z-index: 22;
      position: absolute;
      left: 14%;
      top: 21px;
    }
  }
  .iconbox:hover .onekeys {
    display: block;
    width: 100px;
    font-size: 16px;
  }
  // 点击一次后
  .clicked {
    position: absolute;
    right: 10px;
    // bottom: 0;
    width: 240px;
    border-radius: 7px;
    .speedicons {
      position: absolute;
      left: 39%;
      top: -22px;
      z-index: 20;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ff7600;
      border: 4px solid #ffe2cf;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -14px;
        margin-top: -15px;
      }
    }
    .borderNone {
      border: none;
    }
    .clicktext {
      img {
        position: absolute;
        top: 8px;
        right: 10px;
        cursor: pointer;
      }
      .clicktime {
        padding-top: 44px;
        width: 84px;
        margin: 0 auto 10px auto;
        color: #fd7f2c;
        font-size: 14px;
        color: #fd7f2c;
        text-align: center;
        span {
          display: inline-block;
          width: 16px;
          height: 24px;
          line-height: 24px;
          background-color: #fff1e8;
          margin-right: 2px;
          border-radius: 4px;
          text-align: center;
        }
      }
      height: 150px;
      background-color: #fff;
      box-shadow: 0px 0px 9px 1px #f1f1f1;
      border-radius: 10px 10px 0px 0px;
      border-radius: 15px;
      p {
        font-size: 14px;
        color: #666;
        text-align: center;
      }
      p:nth-of-type(1) {
        padding-bottom: 6px;
      }
    }
    .circle {
      position: absolute;
      top: -21px;
      right: 88px;
      width: 57px;
      height: 57px;
      -webkit-animation: rainbow-data-v-07745544 1s linear infinite normal;
      animation: rainbow-data-v-07745544 1s linear infinite normal;
      z-index: 111;
    }
    @keyframes rainbow {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .shadowBox_01 {
      width: 23px;
      height: 15px;
      background: url("../../../../assets/li/lightning_top.png");
      z-index: 22;
      position: absolute;
      right: 109px;
      top: -7px;
    }
    .shadowBox_02 {
      width: 23px;
      height: 15px;
      background: url("../../../../assets/li/lightning_bottom.png");
      z-index: 22;
      position: absolute;
      right: 108px;
      top: 6px;
    }
  }

  .transparency {
    opacity: 0;
  }
}
</style>
